<template>
  <div class="management">
    <el-form label-position="left" :inline="true" :model="searchForm" size="small" label-width="100px">
      <el-form-item label="设备执行结果">
        <el-select v-model="searchForm.shellExecuteStatus" clearable placeholder="请选择类型">
          <el-option label="执行中" value="0"></el-option>
          <el-option label="成功" value="1"></el-option>
          <el-option label="失败" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search" icon="el-icon-search" size="mini">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange" fit :max-height="maxHeight" border stripe size="mini" highlight-current-row
      :header-cell-style="{ background: '#e5e5e5', color: '#000' }">
      <el-table-column prop="deviceName" label="设备名称" align="center"/>
      <el-table-column prop="deviceNodeId" label="设备唯一标识码" align="center"/>
      <el-table-column label="文件类型" align="center">
        <template v-for="(item, index) in row.taskFileTypeList">
          <!-- <el-tag type="success" size="mini" :key="index">{{item|getTypeName(optionsFileType)}}</el-tag> -->
          <span style="color: #67c23a" :key="index">{{
            item | getTypeName(optionsFileType)
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="文件名称" align="center">
        <template v-for="(item, index) in row.taskFileNameList">
          <!-- <el-tag type="success" size="mini" :key="index">{{item}}</el-tag> -->
          <span style="color: #67c23a" :key="index">{{ item }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="shellExecuteCount" label="已重发次数" align="center">
        <template slot-scope="{row}">
          <span>{{  row.shellExecuteCount -1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="taskRepeatNum" label="总重发次数" align="center"/>
      <el-table-column prop="status" label="执行结果">
        <template slot-scope="scope">
          <span style="color: #f56c6c" v-if="scope.row.shellExcuteStatus == null">设备未返回数据</span>
          <span style="color: #67c23a" v-else-if="scope.row.shellExcuteStatus == '0'">执行中</span>
          <span style="color: #67c23a" v-else-if="scope.row.shellExcuteStatus == '1'">成功</span>
          <span style="color: #f56c6c" v-else-if="scope.row.shellExcuteStatus == '2'">失败</span>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="shellExecuteCount" label="下发命令次数" /> -->
      <el-table-column label="操作" width="250" align="center" fixed="right">
        <template slot-scope="{ row }">
          <el-button type="text" size="mini" :disabled="row.status == '0' && row.shellExcuteStatus == 1" @click="onRestart(row)" icon="el-icon-refresh">重新下发</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: right">
      <pagination v-show="pagination.total > 0" :limit.sync="pagination.pageSize" :page.sync="pagination.page" :total="pagination.total" @pagination="getPageList" />
    </div>
  </div>
</template>

<script>
import * as api from "@/api/link/device";
import * as apiGroupDevice from "@/api/link/deviceGroup";
import * as apiDownRecord from "@/api/link/downRecord";
import * as apiTask from "@/api/link/task";

export default {
  comments: {},
  props: {
    taskId: String,
    row: Object,
    // taskRepeatNum: {
    //   default: 1
    // }
  },
  data() {
    return {
      searchForm: {},
      searchTime: [],
      groupList: [],
      multipleSelection: [],
      tableData: [],
      pagination: {
        total: 1,
        page: 1,
        pageSize: 10,
      },
      form: {},
      dialogVisible: false,
      rules: {
        topic: [{ required: true, message: "必须输入topic", trigger: "blur" }],
        body: [{ required: true, message: "必须输入报文", trigger: "blur" }],
      },
      optionsFileType: [
        // 1 设备软件  2 补丁 3 初始化配置 4 shell脚本 5 组件公钥 6 容器公钥 7 应用公钥 8 容器镜像包 9 容器升级包 10 应用文件 11 终端升级包
        {
          value: "1",
          label: "设备软件",
        },
        {
          value: "2",
          label: "补丁",
        },
        {
          value: "3",
          label: "初始化配置",
        },
        {
          value: "4",
          label: "shell脚本",
        },
        {
          value: "5",
          label: "组件公钥",
        },
        {
          value: "6",
          label: "容器公钥",
        },
        {
          value: "7",
          label: "应用公钥",
        },
        {
          value: "8",
          label: "容器镜像包",
        },
        {
          value: "9",
          label: "容器升级包",
        },
        {
          value: "10",
          label: "应用文件",
        },
        {
          value: "11",
          label: "终端升级包",
        },
        {
          value: "33",
          label: "差分升级",
        },
      ],
      taskRepeatNum: ''
    };
  },
  filters: {
    getTypeName(val, list) {
      if (!val) {
        return "";
      }
      var label = "";
      list.map((item) => {
        if (val == item.value) {
          label = item.label;
        }
      });
      return label;
    },
  },
  computed: {
    maxHeight() {
      var curHeight =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight;
      return curHeight - 280;
    },
  },
  created() {
    this.groupPage();

    // this.taskRow =
    if ("string" == typeof this.row.taskFileNameList) {
      let temp = [];
      temp.push(this.row.taskFileNameList);
      this.row.taskFileNameList = temp;
    }
    this.getData(this.$route.query.id)
    // this.searchForm.groupName = this.$route.query.groupName
  },
  mounted() { },
  methods: {
    // 复选框事件
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    getPageList() {
      this.search();
    },
    getData(id) {
      apiTask.getById(id).then((res) => {
        this.taskRepeatNum = res.data.taskRepeatNum
        this.getPageList();
      });
    },
    search() {
      this.searchForm.taskId = this.row.id;
      const p = Object.assign(this.searchForm, this.pagination);
      apiTask.pageDownRecord(p).then((resp) => {

        this.tableData = resp.data.list;
        this.tableData.forEach(item => {
          item.taskRepeatNum = this.taskRepeatNum
        })
        this.pagination = resp.data.pagination;
        this.pagination.page = resp.data.pagination.current;
      });
    },
    groupPage() {
      const p = Object.assign({}, { page: 1, pageSize: 200 });
      apiGroupDevice.list(p).then((resp) => {
        this.groupList = resp.data;
      });
    },
    handleCommand(row) {
      // this.dialogVisible = true;
      // this.form.deviceId = [];
      // this.form.deviceId.push(row.deviceId)
      this.$router.push({
        path: "/orderIssued",
        params: row,
      });
    },
    // 重新下发
    onRestart(row) {
      let curMap = {
        downRecordId: row.id,
        deviceId: row.deviceId,
        topic: row.topic,
        body: row.body,
        url: row.commandUrl,
        tenantId: row.tenantId,
      };
      apiDownRecord.downAgain(curMap).then((resp) => {
        if (resp.code === 200) {
          this.dialogVisible = true;
          this.$message({
            showClose: true,
            message: "命令重新下发成功",
            type: "success",
          });
          this.getPageList();
        }
      });
    },
    handleCommandBatch() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: "请勾选数据",
          type: "warning",
        });
        return;
      }
      let deviceIds = [];
      for (let i = 0; i < this.multipleSelection.length; i++) {
        deviceIds.push(this.multipleSelection[i].deviceId);
      }
      this.dialogVisible = true;
      this.form.deviceId = [];
      this.form.deviceId.push(deviceIds);
    },
    handleSave() {
      let map = {
        deviceId: this.form.deviceId.join(","),
        topic: this.form.topic,
        body: this.form.body,
        tenantId: this.form.tenantId,
      };
      apiDownRecord.save(map).then((resp) => {
        if (resp.code === 200) {
          this.dialogVisible = true;
          this.$message({
            showClose: true,
            message: "命令下发成功",
            type: "success",
          });
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.management {
  padding: 20px;

  .curHeader {
    position: relative;
    height: 40px;
    .searcherBox {
      position: absolute;
      right: 0;
      top: 0;
    }
  }
}
</style>
